import Vue from 'vue';
import Vuex from 'vuex';
import { http } from '../common/api/index';

Vue.use(Vuex);

const store = new Vuex.Store({
  // vuex的基本数据，用来存储变量
  state: {
    cartList: [],
    token: null,
    userInfo: null,
    themeColor: '#F02523',
  },
  // 提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
  // 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
  mutations: {
    init(state, list) {
      state.cartList = list;
    },
    setBadge(state, num) {
      if (num) {
        if (Number(num) > 99) {
          uni.setTabBarBadge({
            index: 2,
            text: '99+'
          })
        } else {
          uni.setTabBarBadge({
            index: 2,
            text: num + ''
          })
        }
      } else {
        uni.removeTabBarBadge({
          index: 2
        })
      }
    },
    // 初始化APP,获取缓存的token,用户信息等其他缓存内容
    appInit() {

    },
    // 更新用户信息
    updateUserInfo() {

    },
    // 切换主题
    switchThemeColor(state, color) {



    }
  },
  // 从基本数据(state)派生的数据，相当于state的计算属性
  getters: {
    allNum(state) {
      let list = state.cartList;
      let total = 0;
      list.forEach((item) => {
        total += Number(item.num);
      });
      return total;
    }
  },
  // 和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
  actions: {
    getCartList({
      dispatch,
      commit,
      getters
    }) {
      // console.log(global.apiUrls.getCartList)
      if (global.token) {
        http.post(global.apiUrls.getCartList).then((res) => {
          if (res.data.code == 1) {
            //   console.log("cart", res.data);
            let data = res.data.data;
            commit('init', data);
            commit('setBadge', getters.allNum)
          }
        });
      }
    }
  },
  //  modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

})
export default store;
